import React from 'react';
import Head from 'next/head';
import { View, Text, Button } from '@tarojs/components';
import './index.less';

export default function HomePage() {
  return (
    <>
      <Head>
        <title>Taro + Next.js 项目</title>
        <meta name="description" content="Taro + Next.js 跨平台项目" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <View className="index">
        <View className="at-article">
          <View className="at-article__h1">
            Taro + Next.js 跨平台项目
          </View>
          <View className="at-article__info">
            支持小程序端和Web端
          </View>
          <View className="at-article__content">
            <View className="at-article__section">
              <View className="at-article__h2">功能特性</View>
              <View className="at-article__p">
                这是一个使用 Taro + React + TypeScript 构建的跨平台项目，
                支持在微信小程序端运行，在Web端使用Next.js框架。
              </View>
              <View className="at-article__p">
                主要特性：
              </View>
              <View className="at-article__ul">
                <View className="at-article__li">支持微信小程序</View>
                <View className="at-article__li">支持Web端（Next.js）</View>
                <View className="at-article__li">TypeScript支持</View>
                <View className="at-article__li">Less样式预处理器</View>
                <View className="at-article__li">ESLint代码规范</View>
              </View>
            </View>
          </View>
        </View>

        <View className="action">
          <Button className="action__btn" type="primary" onClick={() => window.location.href = '/list'}>
            虚拟滚动列表
          </Button>
          <Button className="action__btn secondary" onClick={() => window.location.href = '/test'}>
            测试页面
          </Button>
        </View>
      </View>
    </>
  );
}
